<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <canvas id="app" width="800" height="600">
      your browser don't support canvas
    </canvas>
    <div>键盘上下左右可以改变视点位置</div>
    <div>
      x:<span id="x"></span>
      y:<span id="y"></span>
      z:<span id="z"></span>
    </div>

    <script src="../lib/webgl-utils.js"></script>
    <script src="../lib/webgl-debug.js"></script>
    <script src="../lib/cuon-utils.js"></script>
    <script src="../lib//cuon-matrix.js"></script>

    <script>
      var VSHADER_SOURCE = `
              attribute vec4 a_Position;
              attribute vec4 a_Color;
              uniform mat4 u_ViewMatrix;
              uniform mat4 u_ProjMatrix;
              varying vec4 v_Color;
              void main(){
                  gl_Position = u_ProjMatrix * u_ViewMatrix * a_Position;
                  v_Color = a_Color;
              }
          `;

      var FSHADER_SOURCE = `
              precision mediump float;
              varying vec4 v_Color;
              void main(){
                  gl_FragColor = v_Color;
              }
          `;

      var canvas = document.getElementById("app");
      /** @type {WebGLRenderingContext}*/
      var gl = getWebGLContext(canvas);

      if (!gl) throw new Error("can't get webgl context");

      if (!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
        throw new Error("can't init shaders");
      }

      var n = initVertexBuffer(gl);
      if (n < 0) throw new Error("can't init vertex buffer");

      var u_ViewMatrix = gl.getUniformLocation(gl.program, "u_ViewMatrix");
      var viewMatrix = new Matrix4();
      var eyeX = 0,
        eyeY = 0,
        eyeZ = 15;
      viewMatrix.setLookAt(eyeX, eyeY, eyeZ, 0, 0, -100, 0, 1, 0);
      gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);

      var u_ProjMatrix = gl.getUniformLocation(gl.program, "u_ProjMatrix");
      var projMatrix = new Matrix4();
      projMatrix.setPerspective(30, canvas.width/canvas.height, 1, 100);
      gl.uniformMatrix4fv(u_ProjMatrix, false, projMatrix.elements);

      gl.clearColor(0.0, 0.0, 0.0, 1.0);
      gl.clear(gl.COLOR_BUFFER_BIT);
      gl.drawArrays(gl.TRIANGLES, 0, n);
      refresh(eyeX, eyeY, eyeZ);

      function draw(gl, n, u_ViewMatrix, viewMatrix) {
        viewMatrix.setLookAt(eyeX, eyeY, eyeZ, 0, 0, 0, 0, 1, 0);
        gl.uniformMatrix4fv(u_ViewMatrix, false, viewMatrix.elements);
        gl.clear(gl.COLOR_BUFFER_BIT);
        gl.drawArrays(gl.TRIANGLES, 0, n);
      }

      function refresh(x, y, z) {
           document.getElementById("x").innerText = x.toFixed(2);
           document.getElementById("y").innerText = y.toFixed(2);
           document.getElementById("z").innerText = z.toFixed(2);
      }

      function initVertexBuffer(/** @type{WebGLRenderingContext}*/ gl) {
        let vertices = new Float32Array([
            // Three triangles on the right side
            0.75,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
            0.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
            1.25, -1.0,  -4.0,  1.0,  0.4,  0.4, 

            0.75,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
            0.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
            1.25, -1.0,  -2.0,  1.0,  0.4,  0.4, 

            0.75,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
            0.25, -1.0,   0.0,  0.4,  0.4,  1.0,
            1.25, -1.0,   0.0,  1.0,  0.4,  0.4, 

            // Three triangles on the left side
            -0.75,  1.0,  -4.0,  0.4,  1.0,  0.4, // The back green one
            -1.25, -1.0,  -4.0,  0.4,  1.0,  0.4,
            -0.25, -1.0,  -4.0,  1.0,  0.4,  0.4, 

            -0.75,  1.0,  -2.0,  1.0,  1.0,  0.4, // The middle yellow one
            -1.25, -1.0,  -2.0,  1.0,  1.0,  0.4,
            -0.25, -1.0,  -2.0,  1.0,  0.4,  0.4, 

            -0.75,  1.0,   0.0,  0.4,  0.4,  1.0,  // The front blue one 
            -1.25, -1.0,   0.0,  0.4,  0.4,  1.0,
            -0.25, -1.0,   0.0,  1.0,  0.4,  0.4, 
        ]);
        let n = 18;

        let vertexBuffer = gl.createBuffer();
        let FSIZE = vertices.BYTES_PER_ELEMENT;
        gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
        gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

        var a_Position = gl.getAttribLocation(gl.program, "a_Position");
        gl.vertexAttribPointer(a_Position, 3, gl.FLOAT, false, FSIZE * 6, 0);
        gl.enableVertexAttribArray(a_Position);

        var a_Color = gl.getAttribLocation(gl.program, "a_Color");
        gl.vertexAttribPointer(
          a_Color,
          3,
          gl.FLOAT,
          false,
          FSIZE * 6,
          FSIZE * 3
        );
        gl.enableVertexAttribArray(a_Color);

        return n;
      }

      window.onkeydown = function (e) {
        if (e.key === "ArrowLeft") {
          eyeX -= 1;
        }
        if (e.key === "ArrowRight") {
          eyeX += 1;
        }
        if (e.key === "ArrowUp") {
          eyeY += 1;
        }
        if (e.key === "ArrowDown") {
          eyeY -= 1;
        }
        draw(gl, n, u_ViewMatrix, viewMatrix);
        refresh(eyeX, eyeY, eyeZ);
      };
    </script>
  </body>
</html>
